<template>
  <div class="app-container">
    <!-- 回款单列表 -->
    <div class="receivableSheet">
      <!-- 查询模块 -->
      <el-form ref="form" :model="form" label-width="130px" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="流水单号">
              <el-input v-model="form.orderSn" placeholder="请输入流水单号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="form.userName" placeholder="请输入客户姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="form.userPhone" placeholder="请输入客户手机号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="医院名称">
              <el-select v-model="form.hospitalId" placeholder="请选择" filterable>
                <el-option
                  v-for="item in hospitalList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" width="236">
              <el-date-picker
                v-model="dates"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支付时间" width="236">
              <el-date-picker
                v-model="payTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报单类型">
              <el-select v-model="form.formType" placeholder="请选择">
                <el-option label="全部" :value="null" />
                <el-option label="美美咖报单" :value="0" />
                <el-option label="传统报单" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="活动名称">
              <el-select v-model="form.salesType" placeholder="请选择">
                <el-option label="全部" :value="null" />
                <el-option :label="item" :value="index"  v-for="(item,index) in plist" :key="index" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="结算模式">
              <el-select name id clearable v-model="form.settlementType">
                <el-option :value="null" label="全部"></el-option>
                <el-option :value="1" label="预存款模式"></el-option>
                <el-option :value="0" label="回款模式"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="alignRight">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button
                v-if="hasPermission('AdminReconciliationProvider.export')"
                type="primary"
                :disabled="exportFlag"
                @click="handleExport"
              >导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <el-table ref="tableData" :data="tableData" border height="1050" style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50" />
        <el-table-column fixed prop="hospitalName" label="医院名称" />
        <el-table-column fixed prop="orderSn" label="流水单号" />
        <el-table-column fixed prop="formType" label="报单类型" />
        <el-table-column fixed prop="settlementType" label="结算模式" />
        <el-table-column fixed prop="userName" label="客户姓名" />
        <el-table-column fixed prop="userPhone" label="客户手机号" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.userPhone |phonereg}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="salesTypeValue" label="活动名称" />
        <el-table-column prop="totalPrice" label="消费总金额" width="100" />
        <el-table-column prop="allPrice" label="扣除杂费金额" />
        <el-table-column prop="incidentalPrice" label="杂费金额" />
        <el-table-column prop="reimbursementRatio" label="回款比率">
          <template slot-scope="scope">{{ scope.row.paidRatio || scope.row.reimbursementRatio }}%</template>
        </el-table-column>
        <el-table-column prop="wholePlatformPrice" label="整单平台应收" />
        <el-table-column prop="amountSum" label="线上合计收款" />
        <el-table-column prop="onLineTotalDeductionIncidentalPrice" label="线上合计奖励金额" />
        <el-table-column prop="onLineTotalIncidentalPrice" label="线上合计杂费金额" />
        <el-table-column prop="onlinePlatformHasBeenDividedPrice" label="线上平台已分" />
        <!-- <el-table-column prop="comAmtSum" label="手续费"></el-table-column>
        <el-table-column prop="separateAccounts" label="线上总分账金额"></el-table-column>-->
        <el-table-column prop="underTheLineTotalDeductionIncidentalPrice" label="线下合计奖励金额" />
        <el-table-column prop="underTheLineMoneyBackPrice" label="线下已回款金额" />
        <el-table-column prop="totalRefundPrice" label="总计退款奖励金额" />
        <!-- <el-table-column prop="totalRefundIncidentalPrice" label="合计退款杂费"></el-table-column>
        <el-table-column prop="underTheLineMoneyBackPrice" label="已回款业绩"></el-table-column>-->
        <el-table-column prop="paymentRefundPrice" label="已抵扣/付款退款金额"></el-table-column>
        <el-table-column prop="remainingUncollectedPaymentPrice" label="剩余未收款业绩"></el-table-column>
        <el-table-column prop="surplusPayableMmkPrice" label="剩余应收金额"></el-table-column>
        <el-table-column prop="goldCoin" label="结算金币"></el-table-column>
        <el-table-column prop="createdAt" label="日期">
          <template slot-scope="scope">
            <span v-if="scope.row.createdAt">创建：{{ scope.row.createdAt }}</span>
            <span v-if="scope.row.orderTime">支付：{{ scope.row.orderTime }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="payType" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              v-if="hasPermission('AdminReconciliationProvider.getReconciliationDetail')"
              size="small"
              type="text"
              @click="toRoutes('HospitalStatementDetail',scope.row.orderSn)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.pageNum"
            :page-sizes="page_sizes"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HospitalStatement from "@/api/HospitalStatement";
import commonFn from "@/utils/common";
export default {
  name: "HospitalStatementIndex",
  filters: {
    payType(e) {
      switch (e) {
        case "1":
          return "信用卡快捷支付";
        case "2":
          return "借记卡快捷支付";
        case "3":
          return "微信支付";
        case "4":
          return "支付宝支付";
      }
    }
  },
  data() {
    return {
       plist:commonFn.list,
      tableLoading: true,
      // 时间容器
      dates: null,
      payTime: null,
      // table列表
      tableData: [],
      // 导出按钮默认状态
      exportFlag: false,
      // form表单
      form: {
        ispc: 1,
        // salesType:0,
        ispc: 1,
        orderSn: "",
        userName: "",
        userPhone: "",
        hospitalId: null,
        createdAtStar: "",
        createdAtEnd: "",
        PayStar: null,
        PayEnd: null,
        pageNum: 1,
        pageSize: 10
      },
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 60, // 总条目数,
      // 医院名称
      hospitalList: []
    };
  },
  watch: {
    dates(val) {
      this.form.createdAtStar = this.dates ? this.dates[0] : "";
      this.form.createdAtEnd = this.dates ? this.dates[1] : "";
    },
    payTime(val) {
      this.form.PayStar = this.payTime ? this.payTime[0] : "";
      this.form.PayEnd = this.payTime ? this.payTime[1] : "";
    },
    tableData(val) {
      // console.log(val);
      this.exportFlag = val == null;
      console.log(this.exportFlag);
    }
  },
  created() {
    // this.hospitalSelect();
  },
  mounted() {
    // this.form.targetId = Number(this.$store.state.user.hospitalId);
    this.getList(this.form);
    this.hospitalSelect();
  },
  methods: {
    // 按钮权限
    hasPermission(e) {
      return window.helper.hasPermission(e);
    },
    // 医院名称下拉列表
    hospitalSelect() {
      HospitalStatement.hospitalSelect()
        .then(res => {
          console.log(res);
          if (!res.data.code) {
            const resData = res.data.data;
            const newArr = [];
            resData.forEach(e => {
              // console.log(e)
              newArr.push({
                name: e.name,
                value: String(e.id)
              });
            });
            newArr.unshift({
              name: "全部",
              value: null
            });
            // console.log(newArr);
            this.hospitalList = newArr;
            // this.form.hospitalId = this.hospitalList[0].value;
            // this.getList(this.form);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },
    // 获取列表
    getList(e) {
      HospitalStatement.getList(e)
        .then(res => {
          // console.log(res)
          if (!res.data.code) {
            const resData = res.data.data;
            this.tableData = resData.list;
            this.page_totals = resData.count;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
          this.tableLoading = false;
        })
        .catch(err => {
          this.errorStatus(err);
          this.tableLoading = false;
        });
    },
    // 查询
    handleSearch() {
      this.form.pageNum = 1;
      // if (this.dates != null) {
      //   if (this.dates.length > 0) {
      //     this.form.createdAtStar = this.dates[0];
      //     this.form.createdAtEnd = this.dates[1];
      //   } else {
      //     this.form.createdAtStar = null;
      //     this.form.createdAtEnd = null;
      //   }
      // } else {
      //   this.form.createdAtStar = null;
      //   this.form.createdAtEnd = null;
      // }
      this.getList(this.form);
    }, // 导出
    handleExport() {
      console.log(this.$store.state.user.name);
      let dates = { ...this.form };
      dates.createdBy = this.$store.state.user.name;
      HospitalStatement.handleExport(dates)
        .then(res => {
          this.$message.warning(res.data.msg); // commonFn.downFile("美美咖对账单", res);
        })
        .catch(err => {
          this.errorStatus(err);
        });
    },

    // 路由跳转
    toRoutes(e, userId) {
      const route = {
        name: e,
        query: { userId: JSON.stringify(userId) }
      };
      this.$router.push(route);
    },
    // 每页显示条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList(this.form);
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    }
  }
};
</script>
<style scoped>
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
/* 分页样式 */
.pagesCon {
  margin-top: 20px;
  text-align: right;
}
</style>
